<html>
<head>
    <meta charset="utf-8"/>
    <title>任务进度</title>
    <style>
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            /*width: 2000px;*/
        }

        table th {
            border: 1px solid blue;
            color: red;
        }

        table td {
            border: 1px solid blue;
        }

        .header2 {
            background: #04ff00;
        }

        .header3 {
            background: yellow;
        }

        .dataValue {
            background: #00e1ff;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        (function ($) {
            //扩展方法获取url参数
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
            //得到url参数
            var urltype = $.getUrlParam('p');
        })(jQuery);

        function clickBtn(btn) {
            window.history.go(-1);
        }

        function drawData(data) {
            var html =
                (null === data.parentId ? "<tr class='header2'><td>" : "requirements" == data.itemType ? "<tr class='dataValue'><td>" : "<tr><td>") +
                data.id +
                "</td><td>" +
                data.itemCode +
                "</td><td>" +
                data.itemType +
                "</td><td>" +
                data.parentId +
                "</td><td>" +
                data.title +
                "</td><td>" +
                data.handledBy +
                "</td><td>" +
                data.status +
                "</td><td>" +
                data.leafCount +
                "</td><td>" +
                data.workDay +
                "</td><td>" +
                data.completeDay +
                "</td><td>" +
                data.percentage * 100 +
                "%</td></tr>";
            return html;
        }

        function drawTable(data) {
            var html = drawData(data);
            $("table").append($(html));
            if (data.children) {
                for (idx in data.children) {
                    drawTable(data.children[idx])
                }
            }
        }

        $(document).ready(function () {
            $("body").prepend(new Date());

            $.ajax({
                type: "GET",
                url: "/task-progress/tree?sprintId=" + $.getUrlParam('sprintId'),
                success: function (data) {
                    drawTable(data, true);
                },
            });
        });
    </script>
</head>
<body>
    <div style="position: relative; top: 20px;">
        <button onclick='clickBtn(this)'>返回上页</button>
        <table>
            <tr>
                <th>事项ID</th>
                <th>事项CODE</th>
                <th>事项类型</th>
                <th>父ID</th>
                <th>标题</th>
                <th>负责人</th>
                <th>状态</th>
                <th>叶子任务数</th>
                <th>估时/人天</th>
                <th>完成/人天</th>
                <th>完成进度</th>
            </tr>
        </table>
    </div>
</body>
</html>
